<template>
  <div :value="value" :sub="sub">
    <el-table
      :data="value.axis"
      border
      style="width: 100%"
    >
      <el-table-column prop="name" label="名称" align="center" width="150px" />
      <el-table-column prop="position_name" label="位置名称" align="center" width="150px" />
      <el-table-column label="位置" align="center" width="250px">
        <template slot-scope="{row, $index}">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-popover placement="top" title="重置" width="300" trigger="click">
                <el-row :gutter="20">
                  <el-col :span="16"> <el-input v-model="resetPosition" /> </el-col>
                  <el-col :span="4"> <el-button type="primary" @click="onSetPos(row, $index)">确定</el-button> </el-col>
                </el-row>
                <el-button slot="reference" size="mini" class="position-btn">重置</el-button>
              </el-popover>
            </el-col>
            <el-col :span="14">
              <span class="position-text"> {{ row.position }}  </span>
            </el-col>
            <el-col :span="4">
              <span> {{ row.unit }}  </span>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="目标" align="center" width="400px">
        <template slot-scope="{row, $index}">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-popover placement="top" title="选择目标位置" width="500" trigger="click">
                <el-table ref="singleTable" :data="currentPositions" highlight-current-row style="width: 100%" @current-change="onSelectChange">
                  <el-table-column property="name" label="名称" />
                  <el-table-column property="value" label="位置" />
                </el-table>
                <el-button slot="reference" size="mini" @click="onSelectPos(row, $index)">位置</el-button>
              </el-popover>
            </el-col>
            <el-col :span="14">
              <el-input-number
                v-model="row.target"
                :precision="3"
                :step="0.1"
                :max="10000"
                :min="-10000"
                size="medium"
                controls-position="right"
              />
            </el-col>
            <el-col :span="4">
              <span> {{ row.unit }} </span>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="{row, $index}">
          <el-button v-loading.fullscreen.lock="row.loading" type="success" size="mini" @click="onMove(row, $index)"> 移动 </el-button>
          <el-button v-loading.fullscreen.lock="row.loading" type="warning" size="mini" @click="onMoveErr(row, $index)"> 相对 </el-button>
          <el-button type="danger" size="mini" @click="onStop(row, $index)"> 停止 </el-button>
          <el-button type="primary" size="mini" @click="onGetPosition(row, $index)"> 获取 </el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.status | typeFilter "> {{ row.status | statusFilter }} </el-tag>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { CMD_AXIS } from '@/utils/cmd'

export default {
  name: 'TrackAxis',
  components: { },
  filters: {
    typeFilter(status) {
      if (status === -1) {
        return 'danger'
      } else if (status === 0) {
        return 'success'
      } else if (status === 1) {
        return 'warning'
      } else if (status === 2) {
        return 'warning'
      } else if (status === 3) {
        return 'warning'
      } else if (status === 256) {
        return 'danger'
      } else if (status === 512) {
        return 'danger'
      } else {
        return 'danger'
      }
    },
    statusFilter(status) {
      if (status === -1) {
        return '异常'
      } else if (status === 0) {
        return '正常'
      } else if (status === 1) {
        return '移动中'
      } else if (status === 2) {
        return '获取位置'
      } else if (status === 3) {
        return '正常'
      } else if (status === 256) {
        return '到达限位'
      } else if (status === 512) {
        return '到达限位'
      } else {
        return '无'
      }
    }
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    value: {
      type: Object,
      default: null
    },
    name: {
      type: String,
      default: null
    },
    sub: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      resetPosition: 0,
      showHeader: false,
      tableWidth: '150',
      dialogSelectPosFormVisible: false,
      selectIndex: 0,
      currentPositions: [],
      currentPosition: null,
      current_axis: null,
      current_index: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.setValue(val)
      }
    }
  },
  created() {
  },
  methods: {
    setValue(val) {
      this.value = val
    },
    // 重置位置
    onSetPos(row, index) {
      this.resetPositionVisible = true
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].set_position.toString(),
        msg: (parseFloat(this.resetPosition) * 1000).toString()
      }))
    },

    onSelectPos(row, index) {
      this.currentPositions = row.positions
      this.selectIndex = index
    },
    onSelectChange(pos) {
      this.value.axis[this.selectIndex].target = pos.value
    },

    onMoveStart(axis, index) {
      // 开启移动
      axis.status = 0

      axis.move_flag = true
      axis.move_done = true
      axis.move_timeout_cnt = 0

      axis.get_flag = false
      axis.get_done = false
      axis.get_timeout_cnt = 0

      axis.done = false
      // axis.loading = true
      console.log('移动')
      console.log(axis)
      this.timer = setInterval(() => {
        if (axis.done) {
          axis.loading = false
          console.log('移动完成,清除定时器...')
          clearInterval(this.timer)
        }
        console.log(axis.get_done)
        // 移动
        if (axis.move_flag) {
          console.log('发送移动命令....')
          if (axis.move_done) {
            axis.move_done = false
            axis.move_timeout_cnt = 0
          }
          this.onMove(axis, index)
          axis.move_timeout_cnt += 1
          if (axis.move_timeout_cnt > 3) {
            axis.loading = false
            this.$message({ message: '移动超时~', type: 'warning' })
            clearInterval(this.timer)
          }
        }
        // 获取位置
        if (axis.get_flag) {
          console.log('发送获取命令....')
          if (axis.get_done) {
            axis.get_done = false
            axis.get_timeout_cnt = 0
          }
          this.onGetPosition(axis, index)
          axis.get_timeout_cnt += 1
          if (axis.get_timeout_cnt > 3) {
            axis.loading = false
            this.$message({ message: '获取位置超时~', type: 'warning' })
            clearInterval(this.timer)
          }
        }
      }, 1000)
    },
    onMove(axis, index) {
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].move_pos.toString(),
        msg: (parseFloat(axis.target) * 1000).toString()
      }))
    },
    onMoveErr(axis, index) {
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].move_err.toString(),
        msg: (parseFloat(axis.target) * 1000).toString()
      }))
    },
    onStop(axis, index) {
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].stop.toString(),
        msg: '0'
      }))
    },
    onGetPosition(axis, index) {
      console.log('获取轴' + index + '位置')
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].get_position.toString(),
        msg: '1'
      }))
    },
    onGetStatus(axis, index) {
      console.log('获取轴' + index + '状态')
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].get_status.toString(),
        msg: '1'
      }))
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }

  }
}
</script>

<style lang="scss" scoped>

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;
  }
  .position-text{
    color: #ff00ff;
    font-size: 25px;
  }
</style>
